<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>塔内PC报修单</title>


	<link href="../css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" href="../css/common.css"/>
	<link rel="stylesheet" href="../css/form-style.css"/>


	<script src="../js/jquery.js"></script>
	<script src="../js/bootstrap.min.js"></script>
</head>
<body>
<!-----------------------------巨幕------------------------------------>
<div id="jumbotron-header" class="jumbotron">

	<div class="container">
		<h1>塔内PC电脑报修</h1>
		<p>一份报修单，随传随到。我们真诚地为各位华师学子提供无偿的电脑维修服务</p>
	</div>
</div>


<div class="container">
	<p>请准确填写个人信息、故障描述，提交完成后我们会尽快与你取得联系</p>
	<!-------------------------------个人信息---------------------------->
	<form id="maintain-form" action="post">
		<div class="container">
			<div class="row field-row">
				<!------------------------个人信息图表---------------------------->
				<div class="col col-sm-3 image-row hidden-xs">
					<div class="image-box1">
						<span class="glyphicon glyphicon-user sm-image"></span>
						<p>个人信息</p>
					</div>
				</div>
				<!-------------------------个人信息表单-------------------------->
				<div class="col col-sm-9">
						<div class="input-group">
							<label for="name">姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名<em>*</em></label>
							<input id="name" name="name" type="text" required/>
						</div>
						<div class="input-group">
							<label for="phone">联系电话<em>*</em></label>
							<input id="phone" name="phone" type="text" required/>
						</div>
						<div class="input-group">
							<label for="grade">年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;级</label>
							<input id="grade" name="grade" type="text" placeholder="四位数字,如2012"
								pattern="[0-9]{4}"/>
						</div>

						<div id="dorm-area">
							<label for="dormitory">宿&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;舍</label>

							<select class="form-control" name="district" id="district">
								<option>东区</option>
								<option>西区</option>
							</select>
							<input id="dormitory" name="dormitory" type="text"/></span>
						</div>
				</div>
			</div>

			<!----------------------------------故障描述---------------------------------->
			<div class="row field-row">
				<!-----------------------------故障图标--------------------------------->
				<div class="col col-sm-3 hidden-xs">
					<div class="image-box2">
						<span class="glyphicon glyphicon-wrench sm-image"></span>
						<p>故障描述</p>
					</div>

				</div>

				<!-----------------------------故障描述表单---------------------------->
				<div class="col col-sm-9">
					<div class="input-group">
						<label for="description">请详细描述故障<em>*</em></label>
						<textarea name="description" id="description" cols="30" rows="10" required></textarea>
					</div>
					<div class="input-group">
						<label for="verification">验&nbsp;&nbsp;&nbsp;&nbsp;证&nbsp;&nbsp;&nbsp;&nbsp;码<em>*</em></label>
						<input id="verification" name="verification" type="text"/>
					</div>
				</div>
			</div>
		</div>

		<!-----------------------------------提交按钮组-------------------------------->
		<div id="button-group" class="row">
			<div class="bgroup">
				<input id="submit" class="btn btn-primary" type="submit"/>
				<input id="reset" class="btn btn-default" type="button" value="重置"/>
			</div>

		</div>


	</form>
</div>


</body>
</html>
